<template>
  <div class="salary-table">
    <div class="title">
      <span>薪酬表</span>
    </div>
    <el-button class="add" type="primary" plain @click="addDetail()"
      >新增</el-button
    >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="salaryType" label="薪酬类型" width="180">
      </el-table-column>
      <el-table-column prop="ssqq" label="薪酬所属期起"> </el-table-column>
      <el-table-column prop="ssqz" label="薪酬所属期止"> </el-table-column>
      <el-table-column prop="empCount" label="人数"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(slipId)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="delateItem(slipId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '../../utils/request'
import { getList, getToken } from '../../api/table_main'
export default {
  name: 'table_a',
  components: {},
  data () {
    return {
      slipId: '',
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    addDetail () {
       getList().then((res) => {
         if (res.data.code === 0) {
           this.$alert('当前所属期薪酬表已存在！', '信息', {
             confirmButtonText: '确定'
           })
         } else {
        this.$router.push('/salaryDetails')
         }
       })
    },
    // 编辑跳转
    edit (slipId) {
      this.$router.push('/salaryDetails?slipId=' + slipId)
    },
    // 薪酬表显示
    getList () {
      getList().then((res) => {
        getToken()
        console.log(res)
        if (res.data.code === 0) {
          this.tableData = res.data.data
          this.slipId = res.data.data[0].slipId
        }
      })
    },

    // 删除
    delateItem (slipId) {
      request
        .post('/salay/deleteBySlipId', {
          slipId: slipId
        })
        .then((res) => {
          getToken()
          console.log('res')
          if (res.data.code === 0) {
            this.tableData = []
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$message.error('删除失败')
          }
        })
    }
  }
}
</script>

<style>
.salary-table {
  margin: 10px 10px;
}
.title span {
  font-size: 18px;
  color: #333;
  border-left: 4px solid #005bac;
  padding-left: 8px;
  line-height: 18px;
}
.add {
  margin-top: 20px;
  position: absolute;
  right: 20px;
}
.el-table {
  margin-top: 80px;
  text-align: center;
}
</style>
